<script setup lang="ts">
import { LoginIn, Role } from '$/client'
import { options } from '$/settings/particles.config'
import LoginForm from '@/components/form-admin/LoginForm.vue'
import router from '@/router'
import { aurls, curls, uurls } from '@/router/urls'
import { Accounts } from '@/scripts/client'
import { useLoginStore } from '@/stores/loginStore'
import { useRequest } from 'alova/client'
import { Card } from 'vexip-ui'
import { ref } from 'vue'

const login = useLoginStore()

const mo = ref(LoginIn.inst())
const { loading: loggingin, send: sendLogin } = useRequest(() => Accounts.login(mo.value), {
  immediate: false
}).onSuccess(({ data }) => {
  login.update(data)
  switch (data.role) {
    case Role.ADMIN:
      return router.push(aurls.admin)
    case Role.STAFF:
      return router.push(aurls.user)
    case Role.USER:
      return router.push(uurls.index)
    case Role.COPILOT:
      return router.push(curls.index)
  }
})
</script>

<template>
  <div class="fixed flex flex-col w-full h-full justify-center items-center">
    <vue-particles class="z-[-1]" id="tsparticles" :options="options" />
    <Card class="w-100 p-4" title="登录">
      <LoginForm v-model="mo" :loading="loggingin" :submit="sendLogin" />
    </Card>
  </div>
</template>
